<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { loadFull } from 'tsparticles'

const particlesInit = async (engine) => {
  await loadFull(engine)
}

const particlesLoaded = async (container) => {
  console.log('Particles container loaded', container)
}
onMounted(() => { })

const goHome = () => {
  router.push('/home')
}

const options = {
  background: {
    color: {
      value: 'white'
    }
  },
  fpsLimit: 50,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {
        // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: 'grab'
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 1,
        size: 40
      },
      push: {
        quantity: 3
      },
      repulse: {
        distance: 300,
        duration: 0.6
      }
    }
  },
  particles: {
    color: {
      value: 'rgba(42, 130, 228, 1)'
    },
    links: {
      color: 'rgba(42, 130, 228, 1)',
      distance: 150,
      enable: true,
      opacity: 0.6,
      width: 1
    },
    collisions: {
      enable: false
    },
    move: {
      direction: 'none',
      enable: true,
      outMode: 'bounce',
      random: false,
      speed: 2.5,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 1000
      },
      value: 80
    },
    opacity: {
      value: 0.6
    },
    shape: {
      type: 'circle'
    },
    size: {
      random: true,
      value: 5
    }
  },
  detectRetina: true
}
</script>

<template>
  <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="options" />
  <div class="header">
    <div class="logo" @click="goHome">
      <img src="/logo.png" alt="" />
      <span> 循轨合规</span>
    </div>
    <div class="nav">
      <ul>
        <li @click="goHome()">首页</li>
        <li>个人中心</li>
        <li>关于我们</li>

        <li>人才招聘</li>
        <li>联系我们</li>
      </ul>
    </div>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>
  <div class="footer">
    <div class="footer-logo">
      <img src="/logo.png " alt="" />
      <span> 循轨合规 </span>
    </div>
    <div class="desc">
      循轨————企业合规案例大数据建设与数据挖掘定制服务引领者
    </div>
  </div>
  <div class="beian">
    © 2023 - 循轨合规 -
    <a href="https://beian.miit.gov.cn">粤ICP备2023078204号</a>
  </div>
</template>

<style scoped>
.content {
  height: 850px;
}

.header {
  height: 75px;
  /* border: 1px black solid; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(210, 226, 248, 1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-size: 30px;
  font-weight: bolder;
  width: 25%;
  color: rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  font-family: 'myFont';
  margin-left: 100px;
  transition: all 0.5s;
}

.logo img {
  height: 60px;
}

.logo:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.nav {
  width: 40%;
  color: rgba(0, 0, 0, 1);
}

.nav ul {
  display: flex;
  justify-content: space-around;
}

.nav ul li {
  padding: 10px 5px;
  transition: all 0.2s;
}

.nav ul li:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.footer {
  height: 75px;
  color: rgba(255, 255, 255, 1);
  background: rgba(47, 46, 52, 1);
  position: relative;
  font-family: 'myFont';
}

.beian {
  color: rgba(255, 255, 255, 1);
  background: rgba(47, 46, 52, 1);
  text-align: center;
  padding-bottom: 15px;
}

.beian a {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}

.beian a:hover {
  color: rgb(220, 239, 113);
}

.footer-logo {
  width: 20%;
  font-size: 25px;
  height: 75px;
  line-height: 75px;
  font-weight: bolder;
  display: inline-block;
  text-align: center;
}

.footer-logo img {
  height: 60px;
  vertical-align: middle;
}

.desc {
  display: inline-block;
  position: absolute;
  font-size: 25px;
  height: 75px;
  line-height: 75px;
  font-weight: bolder;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
}

/* .more {
  width: 15%;
  font-size: 14px;
}

.link>span {
  color: gray;
  font-size: 13px;
  margin-right: 20px;
}

.link>span:hover {
  cursor: pointer;
  color: white;
}

.link {
  margin-top: 5px;
} */
</style>
